<template>
  <Modal v-model="show" class="custom-modal-audit" :width="width" @on-ok="ok" @on-cancel="cancel">
    <template #header>
      <div class="ivu-modal-header-inner">
        <slot name="header">
          {{ title }}
        </slot>
      </div>
    </template>

    <slot></slot>

    <template v-if="showFooter" #footer>
      <Button type="primary" class="ivu-btn--round" @click="ok">是</Button>
      <Button class="ml14 ivu-btn--round" @click="handleNo">否</Button>
    </template>
  </Modal>
</template>

<script>
export default {
  name: 'ModalConfrim',

  props: {
    visible: { type: Boolean },

    title: { default: '' },

    width: { default: 384 },

    showFooter: { type: Boolean, default: true },
  },

  computed: {
    show: {
      get() {
        return this.visible
      },

      set(v) {
        this.$emit('update:visible', v)
      },
    },
  },

  methods: {
    close() {
      this.show = false
    },
    ok() {
      this.close()
      this.$emit('on-ok')
    },
    cancel() {
      this.close()
      this.$emit('on-cancel')
    },
    handleNo() {
      this.close()
      this.$emit('on-no')
    },
  },
}
</script>

<style lang="less" scoped>
.custom-modal-audit {
  /deep/ .ivu-modal-header-inner {
    height: 26px;
    line-height: 26px;
    font-size: 16px;
  }

  /deep/ .ivu-modal-footer,
  /deep/ .ivu-modal-header {
    border: none;
  }

  /deep/ .ivu-modal-footer {
    text-align: center;
  }
}
</style>
